<template>
  <div
    class="scroll-container"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
  >
    <slot></slot>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const startY = ref(0)
const isPulling = ref(false)

const handleTouchStart = (event) => {
  startY.value = event.touches[0].pageY
}

const handleTouchMove = (event) => {
  const moveY = event.touches[0].pageY
  if (moveY - startY.value > 50) {
    isPulling.value = true
  }
}

const handleTouchEnd = () => {
  if (isPulling.value) {
    refreshData()
    isPulling.value = false
  }
}

const emit = defineEmits(['refresh'])
const refreshData = () => {
  emit('refresh')
}
</script>

<style lang="scss" scoped>
</style>